<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>dygraph</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

  </head>
  <body>
    <p>1: Simple line chart:</p>
    <div id="graphdiv1"></div>
    <script type="text/javascript">
      g1 = new Dygraph(document.getElementById("graphdiv1"),
                      "Date,Temperature\n" +
                      "2008-05-07,75\n" +
                      "2008-05-08,70\n" +
                      "2008-05-09,80\n" +
                      "2008-05-10,55\n" +
                      "2008-05-11,69\n");
    </script>

    <p>2: Simple step chart:</p>
    <div id="graphdiv2"></div>
    <script type="text/javascript">
      g2 = new Dygraph(document.getElementById("graphdiv2"),
                      "Date,Temperature\n" +
                      "2008-05-07,75\n" +
                      "2008-05-08,70\n" +
                      "2008-05-09,80\n" +
                      "2008-05-10,55\n" +
                      "2008-05-11,69\n",
                       {
                          stepPlot: true
                       });
    </script>

    <p>3: Filled step chart:</p>
    <div id="graphdiv3"></div>
    <script type="text/javascript">
      g3 = new Dygraph(document.getElementById("graphdiv3"),
                      "Date,Temperature\n" +
                      "2008-05-07,75\n" +
                      "2008-05-08,70\n" +
                      "2008-05-09,80\n" +
                      "2008-05-10,55\n" +
                      "2008-05-11,69\n",
                       {
                          stepPlot: true,
                          fillGraph: true
                       });
    </script>

    <p>4: Line chart with error bars:</p>
    <div id="graphdiv4"></div>
    <script type="text/javascript">
      g4 = new Dygraph(document.getElementById("graphdiv4"),
        [
          [1, [75, 2]],
          [2, [70, 5]],
          [3, [80, 7]],
          [4, [55, 3]],
          [5, [69, 4]]
        ],
        {
           errorBars: true,
           labels: ["X", "Data"]
        }
      );
    </script>
    
    <p>5: Step chart with error bars:</p>
    <div id="graphdiv5"></div>
    <script type="text/javascript">
      g5 = new Dygraph(document.getElementById("graphdiv5"),
        [
          [1, [75, 2]],
          [2, [70, 5]],
          [3, [80, 7]],
          [4, [55, 3]],
          [5, [69, 4]]
        ],
        {
           stepPlot: true,
           errorBars: true,
           labels: ["X", "Data"]
        }
      );
    </script>

    <p>6: Stepped chart with gaps from CSV:</p>
    <div id="graphdiv6"></div>
    <script type="text/javascript">
    g6 = new Dygraph(
      document.getElementById("graphdiv6"),
      "Date,GapSeries1,GapSeries2\n" +
      "2009/12/01,10,10\n" +
      "2009/12/02,15,11\n" +
      "2009/12/03,,12\n" +
      "2009/12/04,,13\n" +
      "2009/12/05,15,\n" +
      "2009/12/06,18,15\n" +
      "2009/12/07,12,16\n",
      {
        stepPlot: true
      }
    );
    </script>

    <p>7: Stepped chart with gaps from native data:</p>
    <div id="graphdiv7"></div>
    <script type="text/javascript">
    g7 = new Dygraph(
      document.getElementById("graphdiv7"),
      [
        [ new Date("2009/12/01"), 10, 10],
        [ new Date("2009/12/02"), 15, 11],
        [ new Date("2009/12/03"), null, 12],
        [ new Date("2009/12/04"), null, 13],
        [ new Date("2009/12/05"), 15, null],
        [ new Date("2009/12/06"), 18, 15],
        [ new Date("2009/12/07"), 12, 16]
      ],
      {
        labels: ["Date","GapSeries1","GapSeries2"],
        showRoller: true,
        stepPlot: true,
        GapSeries2: { axis: {} }
      }
    );
    </script>
    
    <p>8: Stacked filled step chart:</p>
    <div id="graphdiv8"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv8"),
                      "Date,Idle,Used\n" +
                      "2008-05-07,70,30\n" +
                      "2008-05-08,12,88\n" +
                      "2008-05-09,88,12\n" +
                      "2008-05-10,63,37\n" +
                      "2008-05-11,35,65\n",
                       {
                          stepPlot: true,
                          fillGraph: true,
                          stackedGraph: true,
                          includeZero: true
                       });
    </script>
	
	<p>9: Mixed mode - step and line:</p>
    <div id="graphdiv9"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv9"),
                      "Date,Idle,Used\n" +
                      "2008-05-07,70,30\n" +
                      "2008-05-08,12,88\n" +
                      "2008-05-09,88,12\n" +
                      "2008-05-10,63,37\n" +
                      "2008-05-11,35,65\n",
                      {
		                series: {
						  Idle: {stepPlot: true},
						  Used: {stepPlot: false}
						},
						  
                        fillGraph: false,
                        stackedGraph: false,
                        includeZero: true
                      });
    </script>
	
	
	<p>10: Mixed mode - step and line (filled):</p>
    <div id="graphdiv10"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv10"),
                      "Date,Idle,Used\n" +
                      "2008-05-07,70,30\n" +
                      "2008-05-08,12,88\n" +
                      "2008-05-09,88,12\n" +
                      "2008-05-10,63,37\n" +
                      "2008-05-11,35,65\n",
                      {
		                series: {
						  Idle: {stepPlot: false},
						  Used: {stepPlot: true}
						},
						  
                        fillGraph: true,
                        stackedGraph: false,
                        includeZero: true
                      });
    </script>

	<p>11: Mixed mode - step and line (stacked and filled):</p>
    <div id="graphdiv11"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv11"),
                      "Date,Idle,Used,NotUsed,Active\n" +
                      "2008-05-07,60,30,5,5\n" +
                      "2008-05-08,12,73,5,10\n" +
                      "2008-05-09,38,12,30,20\n" +
                      "2008-05-10,50,17,23,10\n" +
                      "2008-05-11,35,25,35,5\n",
                      {
		                series: {
						  Idle: {stepPlot: false},
						  Used: {stepPlot: true},
						  NotUsed: {stepPlot: false},
						  Active: {stepPlot: true}						     
                        },
                        fillGraph: true,
                        stackedGraph: true,
                        includeZero: true
                      });
    </script>
	
	<p>12: Mixed mode - step and line (errorbars):</p>
    <div id="graphdiv12"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv12"),
        [
          [1, [75, 2], [50, 3]],
          [2, [70, 5], [90, 4]],
          [3, [80, 7], [112, 5]],
          [4, [55, 3], [100, 2]],
          [5, [69, 4], [85, 6]]
        ],	
        {		   
          errorBars: true,
          labels: ["X", "Data1", "Data2"],
		  series: {
		    Data1: {stepPlot: true},	
		    Data2: {stepPlot: false} 
		  }
        }
	  );
    </script>
	
	<p>13: Mixed mode - step and line (custombars):</p>
    <div id="graphdiv13"></div>
    <script type="text/javascript">
      g8 = new Dygraph(document.getElementById("graphdiv13"),
        [
          [1, [73, 75, 78], [50, 55, 70]],
          [2, [65, 70, 75], [83, 91, 99]],
          [3, [75, 85, 90], [98, 107, 117]],
          [4, [55, 58, 61], [93, 102, 105]],
          [5, [69, 73, 85], [80, 85, 87]]
        ],	
        {
          customBars: true,
          labels: ["X", "Data1", "Data2"],
		  series: {
		    Data1: {stepPlot: true},	
		    Data2: {stepPlot: false} 
		  }
        }
	  );
    </script>

  </body>
</html>
